<template>
  <div>
    <el-container style="height:100vh;">
      <el-header>
        <div style="display:flex;justify-content: space-between;">
          <div class="name">
            后台管理系统
          </div>
          <div class="tabBox">
            <div
              class="ming"
              :class="{'active':tabName == item.id}"
              v-for="item in tabList"
              :key="item.id"
              :ceshi="abc"
              @click="tabClick(item)"
            >{{item.name}}</div>
          </div>
          <div class="msgBox">
            <el-dropdown>
              <span class="el-dropdown-link">
                <!-- 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> -->
                <img
                  class="touImg"
                  src="https://lelyzimags.oss-cn-shenzhen.aliyuncs.com/sp/20220214/16580842903c4d.PNG"
                />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="geRen">个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="tuiChu">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="auto">
          <!-- <common-aside></common-aside> -->
          <div>
            <el-menu
              class="el-menu-vertical-demo"
              select="handleSelect"
              @open="handleOpen"
              @close="handleClose"
              :collapse="isCollapse"
              :default-active="$route.path"
            >
              <el-menu-item
                @click="clickMenu(item)"
                v-for="item in noChildren"
                :index="item.path"
                :key="item.path"
              >
                <i :class="'el-icon-'+item.icon"></i>
                <span slot="title">{{item.label}}</span>
              </el-menu-item>
              <el-submenu
                v-for="item in hasChildren"
                :index="item.path"
                :key="item.path"
              >
                <template slot="title">
                  <i :class="'el-icon-'+item.icon"></i>
                  <span slot="title">{{item.label}}</span>
                </template>
                <el-menu-item-group
                  v-for="(subItem,subIndex) in item.children"
                  :key="subItem.path"
                >
                  <el-menu-item :index="subIndex">{{subItem.label}}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>
        </el-aside>
        <el-main style="background-color:#f5f7f9;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
// import CommonAside from '../components/CommonAside.vue'
// import CommonHeader from '../components/CommonHeader.vue'
export default {
  name: 'Main',
  // components: {
  //   CommonAside
  //   // CommonHeader
  // },
  data() {
    return {
      abc: '',
      tabName: -1,
      activeName: 'second',
      tabList: [
        {
          id: -1,
          name: '首页'
        },
        {
          id: 0,
          name: '人力资源'
        },
        {
          id: 1,
          name: '财务'
        },
        {
          id: 2,
          name: '新零售'
        },
        {
          id: 3,
          name: '企划中心'
        },
        {
          id: 4,
          name: '商品中心'
        },
        {
          id: 5,
          name: '生鲜大客户'
        },
        {
          id: 6,
          name: '大渠道'
        },
        {
          id: 7,
          name: '外贸中心'
        },
        {
          id: 8,
          name: '仓库中心'
        },
        {
          id: 9,
          name: '客服中心'
        },
        {
          id: 10,
          name: '技术中心'
        }
      ],
      isCollapse: false,
      menu: [
        {
          path: '/',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'Home/Home'
        },
        {
          path: '/mall',
          name: 'mall',
          label: '商品管理',
          icon: 'video-play',
          url: 'MallManage/MallManage'
        },
        {
          path: '/user',
          name: 'user',
          label: '用户管理',
          icon: 'user',
          url: 'UserManage/UserManage'
        },
        {
          label: '其他',
          icon: 'location',
          children: [
            {
              path: '/page1',
              name: 'page',
              label: '页面一',
              icon: 'setting',
              url: 'Other/PageOne'
            },
            {
              path: '/page2',
              name: 'page2',
              label: '页面二',
              icon: 'setting',
              url: 'Other/PageTwo'
            }
          ]
        }
      ]
    }
  },
  created() {
    var menu2 = [
      {
        path: '/home',
        name: 'home',
        label: '首页',
        icon: 's-home',
        url: 'Home/Home'
      }
    ]
    this.menu = menu2
    this.$router.push({
      name: menu2[0].name
    })
  },
  methods: {
    tabClick(item) {
      var menu = [
        {
          path: '/mall',
          name: 'mall',
          label: '商品管理',
          icon: 'video-play',
          url: 'MallManage/MallManage'
        },
        {
          path: '/user',
          name: 'user',
          label: '用户管理',
          icon: 'user',
          url: 'UserManage/UserManage'
        },
        {
          label: '其他',
          icon: 'location',
          children: [
            {
              path: '/page1',
              name: 'page',
              label: '页面一',
              icon: 'setting',
              url: 'Other/PageOne'
            },
            {
              path: '/page2',
              name: 'page2',
              label: '页面二',
              icon: 'setting',
              url: 'Other/PageTwo'
            }
          ]
        }
      ]
      var menu1 = [
        {
          path: '/mall',
          name: 'mall',
          label: '测试管理',
          icon: 'video-play',
          url: 'MallManage/MallManage'
        },
        {
          path: '/user',
          name: 'user',
          label: '测试用户',
          icon: 'user',
          url: 'UserManage/UserManage'
        },
        {
          label: '其他',
          icon: 'location',
          children: [
            {
              path: '/page1',
              name: 'page',
              label: '页面三',
              icon: 'setting',
              url: 'Other/PageOne'
            },
            {
              path: '/page2',
              name: 'page2',
              label: '页面四',
              icon: 'setting',
              url: 'Other/PageTwo'
            }
          ]
        }
      ]
      var menu2 = [
        {
          path: '/home',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'Home/Home'
        }
      ]
      this.tabName = item.id
      this.abc = item.id
      if (item.id == -1) {
        this.menu = menu2
        this.$router.push({
          name: menu2[0].name
        })
      } else if (item.id == 0) {
        this.menu = menu
        this.$router.push({
          name: menu[0].name
        })
      } else {
        this.menu = menu1
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(e) {
      console.log(e);
    },
    clickMenu(item) {
      console.log(item);
      this.$router.push({
        name: item.name
      })
    },
    geRen(val) {
      console.log(123, val)
    },
    tuiChu(val) {
      console.log(234, val)
    }
  },
  computed: {
    noChildren() {
      return this.menu.filter(item => !item.children)
    },
    hasChildren() {
      return this.menu.filter(item => item.children)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-header {
  // background-color: #1e55be;
  // background: linear-gradient(#2d8cf0 60deg #1f84ef 100%);
  background: linear-gradient(90deg, #2d8cf0 0%, #1f84ef 100%);
}
.main {
  padding-top: 0;
}
.name {
  width: 170px;
  font-size: 22px;
  color: white;
  font-weight: bold;
  margin-top: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}
.tabBox {
  margin-top: 22px;
  margin-left: 20px;
  display: flex;
  width: 87%;
}
.ming {
  font-size: 16px;
  color: #ccc;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.active {
  color: #fff;
  font-weight: bold;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  height: 100%;
  border: none;
}
.touImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-top: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>